<!DOCTYPE html>
<html lang="zxx">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta
      name="keywords"
      content="html, css, javascript, anime, unica, creative, category, top views, view, genre, svitlychnyi, serhii"
    />
    <meta name="description" content="Це багатосторінковий сайт з описом аніме-фільмів, розібраних по категоріям, завдяки якому ви знайдете, що подивитися ввечері." />
    <meta name="author" content="Світличний Сергій" />
    <title>Anime</title>

    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
    />
    <!-- Css Styles -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="css/elegant-icons.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script src="js/preloader.js" defer></script>
    <script src="js/bg-elements.js" defer></script>
    <script src="js/modal.js" defer></script>
    <script src="js/scroll-to-top.js" defer></script>
    <script src="js/slider.js" defer></script>
    <script src="js/main-data.js" defer></script>
  </head>

  <body>
    <!-- Page Preloder -->
    <div id="preloder" class="preloder">
      <div class="loader"></div>
    </div>

    <!-- Header Section Begin -->
    <header class="header">
      <div class="container">
        <div class="row">
          <div class="col-lg-2">
            <div class="header__logo">
              <a href="./index.html">
                <img src="img/logo.png" alt="" />
              </a>
            </div>
          </div>
          <div class="col-lg-8">
            <div class="header__nav">
              <nav class="header__menu mobile-menu">
                <ul>
                  <li class="active"><a href="./index.html">Homepage</a></li>
                  <li>
                    <a href="./categories.html"
                      >Categories <span class="arrow_carrot-down"></span
                    ></a>
                    <ul class="dropdown"></ul>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="col-lg-2">
            <div class="header__right">
              <a href="#" class="search-switch"
                ><span class="icon_search"></span
              ></a>
              <a href="./login.html"><span class="icon_profile"></span></a>
            </div>
          </div>
        </div>
        <div id="mobile-menu-wrap"></div>
      </div>
    </header>
    <!-- Header End -->

    <!-- Hero Section Begin -->
    <section class="hero">
      <div class="container">
        <div class="hero-box">
          <div class="hero__slider swiper">
            <div class="swiper-wrapper">
              <div
                class="hero__items swiper-slide set-bg"
                data-setbg="img/hero/hero-1.jpg"
              >
                <div class="row">
                  <div class="col-lg-6">
                    <div class="hero__text">
                      <div class="label">Приключения</div>
                      <h2>Fate / Stay Night</h2>
                      <p>После 30 дней путешествия по миру...</p>
                    </div>
                  </div>
                </div>
              </div>

              <div
                class="hero__items swiper-slide set-bg"
                data-setbg="img/hero/hero-2.jpg"
              >
                <div class="row">
                  <div class="col-lg-6">
                    <div class="hero__text">
                      <div class="label">Сёнен</div>
                      <h2>Naruto</h2>
                      <p>В поисках своего пути нинзя...</p>
                    </div>
                  </div>
                </div>
              </div>

              <div
                class="hero__items swiper-slide set-bg"
                data-setbg="img/hero/hero-3.jpg"
              >
                <div class="row">
                  <div class="col-lg-6">
                    <div class="hero__text">
                      <div class="label">Фентези</div>
                      <h2>Sword Art Online</h2>
                      <p>Уровни - это просто цифры.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="hero__slider-pagination swiper-pagination"></div>
          <div class="hero__slider-arrow arrow__next swiper-button-next">
            <span class="arrow_carrot-right"></span>
          </div>
          <div class="hero__slider-arrow arrow__prev swiper-button-prev">
            <span class="arrow_carrot-left"></span>
          </div>
        </div>
      </div>
    </section>
    <!-- Hero Section End -->

    <!-- Product Section Begin -->
    <section class="product spad">
      <div class="container">
        <div class="row">
          <div class="col-lg-8"></div>
          <div class="col-lg-4 col-md-6 col-sm-8">
            <div class="product__sidebar">
              <div class="product__sidebar__view">
                <div class="section-title">
                  <h5>Top Views</h5>
                </div>
                <div class="filter__gallery"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Product Section End -->

    <!-- Footer Section Begin -->
    <footer class="footer">
      <div class="page-up">
        <a href="#" id="scrollToTopButton"
          ><span class="arrow_carrot-up"></span
        ></a>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-3">
            <div class="footer__logo">
              <a href="./index.html"><img src="img/logo.png" alt="" /></a>
            </div>
          </div>
          <div class="col-lg-5">
            <div class="footer__nav">
              <ul>
                <li class="active"><a href="./index.html">Homepage</a></li>
                <li><a href="./categories.html">Categories</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4">
            <p>
              Copyright &copy;
              <script>
                document.write(new Date().getFullYear());
              </script>
              All rights reserved | This template is made with
              <i class="fa fa-heart" aria-hidden="true"></i> by
              <address>
                <a href="https://goo.gl/maps/g5atsvDu5SEUpzET8" target="_blank">Ukraine, Kharkiv</a>
              </address>
            </p>
          </div>
        </div>
      </div>
    </footer>

    <!-- Search model Begin -->
    <div class="search-model">
      <div class="h-100 d-flex align-items-center justify-content-center">
        <div class="search-close-switch"><i class="icon_close"></i></div>
        <form class="search-model-form">
          <input type="text" id="search-input" placeholder="Search here....." />
        </form>
      </div>
    </div>
    <!-- Search model end -->

    <!-- Js Plugins -->
    <script src="https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@latest/lib/bundle.min.js"></script>
    <!-- <script src="js/bootstrap.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
  </body>
</html>
